<template>
	<view class="centent">
		<u-toast ref="uToast" />
		<u-modal v-model="showModel" :content="modelContent" show-cancel-button @confirm="modelConfirm" z-index="9999"></u-modal>
		<view class="pad_bot" v-if="isBind">
			<!-- 头部 -->
			<view class="top_box">
				<view class="top" :style="{'height':phoneHeight+45+'px','position':'relative',}">
					<text class="top_tit"> 学情报告 </text>
				</view>
				<view class="header_info  pad_big mar_top_big">
					<view class="box box-align-center ">
						<view class="avatar">
							<image :src="snInfo.avatar ? snInfo.avatar : 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/noImg.png'" mode="widthFix" style="width: 140rpx;border-radius: 50%; margin-top: -50rpx;"></image>
						</view>
						<view class="user_info pad_def">
							<view class="box box-pack-between box-align-center pad_bot">
								<view class="username ">{{snInfo.name?snInfo.name:'未设置'}}</view>
								<view class="">学生平板状态:<text style="color: #34a9a2;" v-if="isOnline==1">
										在线</text><text style="color: #ff0000;" v-else> 离线</text></view>
							</view>
							<view class="other_info">
								<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/location.png" mode="widthFix" style="width: 30rpx;padding-right: 5px;"></image>
								<text>{{snInfo.addr?snInfo.addr:'暂无'}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view>
				<infoSwiper :list="qidList" :autoplay="false" :circular="false" :content="true" :effect3d="true" effect3d-previous-margin="240" name="avatar" :height="200" :current="currentInedex" @change="swiperChange" @click="clickSwiper" bgColor="#fff" :borderRadius="50"></infoSwiper>
			</view>

			<view>
				<u-subsection :list="list" :current="controlId" @change="tabsChange" active-color="#2979ff" font-size="24"></u-subsection>
			</view>
			<view class="body">
				<view class="control_list" v-if="controlId==0">
					<view class="control_item box box-pack-between pad_def pad_bot_big" v-for="(item,i) in menuList" :key="i" @click="gotoUrl(item.tab)">
						<view class="box box-align-center box-pack-between" style="width: 100%;">
							<view class="box box-align-center box-pack-between">
								<view class="" style="margin-right: 10rpx;">
									<image :src="item.img" mode="widthFix" style="width: 60rpx;"></image>
								</view>
								<view>{{item.tit}}</view>
							</view>
							<view class="icons">
								<u-icon name="arrow-right" color="#cccccc"></u-icon>
							</view>
						</view>
						<view class="control_line"></view>
					</view>
					<view class="app_use_record_footer pad_bot"></view>
				</view>
				<view class="class-room" v-else-if="controlId==1">
					<view>
						<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/parent_education.png" mode="widthFix" style="width: 120rpx;"></image>
						<view>家庭教育</view>
					</view>
					<view>
						<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/mental_health.png" mode="widthFix" style="width: 120rpx;"></image>
						<view>心理健康</view>
					</view>
					<view>
						<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/talk.png" mode="widthFix" style="width: 120rpx;"></image>
						<view>沟通技巧</view>
					</view>
					<view>
						<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/etiquette.png" mode="widthFix" style="width: 120rpx;"></image>
						<view>礼仪辅导</view>
					</view>
				</view>
			</view>

		</view>
		<view class="empty" v-else>
			<u-empty text="请绑定设备" src="" icon-size="220" font-size="36"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		querySnLogInfo,
		checkRefresh,
		queryAppLog,
		querySumAppLog,
		getAppInstall,
		querySysApp,
		getAppUseTimeLog,
		querySnIdScreenshot,
		screenIsLock,
		queryTimeControl,
		snRestControl,
		snRestartControl
	} from '@/api/userHome.js'
	import {
		getUserInfo
	} from '@/api/my.js';
	var wv; //计划创建的webview
	import infoSwiper from "./swiper.vue";
	import {
		getParentQid,
		loginGanKaoH5
	} from '../../api/myEquipment';
	import { mapGetters, mapMutations, mapActions } from 'vuex';

	export default {
		components: {
			infoSwiper,
		},
		data() {
			return {
				showModel: false,
				modelContent: '',
				phoneHeight: '',
				list: [{
						name: '学情'
					},
					{
						name: '家长课堂'
					}
				],
				gkList: [{
					name: '微课',
					tab: 'coursetime'
				}, {
					name: 'AI测评',
					tab: 'aievaluation'
				}, {
					name: '练习',
					tab: 'exercise'
				}, {
					name: 'AI单词斩',
					tab: 'aiwordchop'
				}, {
					name: '口语',
					tab: 'kouyu'
				}, {
					name: 'AI背单词',
					tab: 'word'
				}],
				controlId: 0,
				webviewStyles: {
					progress: {
						color: '#FF3333'
					},
					with: '200rpx'
				},
				gkUrl: ' https://www.gankao.com/p-account/statistics/student?tab=',
				uid: '',
				currentInedex: 0,
				qidList: [],
				menuList: [{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/work.png',
						tit: '学情报告',
						tab: ''
					},
					{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/point.png',
						tit: '积分获得',
						tab: 'point'
					},
					{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/coursetime.png',
						tit: '微课学习时长',
						tab: 'coursetime'
					},
					{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/kouyu.png',
						tit: '口语学习时长',
						tab: 'kouyu'
					},
					{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/word.png',
						tit: 'AI背单词',
						tab: 'word'
					},
					{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/cuotiben.png',
						tit: '错题本收录',
						tab: 'cuotiben'
					},
					{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/work.png',
						tit: '作业',
						tab: 'work'
					},
					{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/aievaluation.png',
						tit: 'AI测评',
						tab: 'aievaluation'
					},
					{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/exercise.png',
						tit: '练习',
						tab: 'exercise'
					},
					{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/kwpoint.png',
						tit: '知识点学习情况',
						tab: 'kwpoint'
					},
					{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/shufa.png',
						tit: '书法练字',
						tab: 'shufa'
					},
					{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/tingxie.png',
						tit: '听写默写',
						tab: 'tingxie'
					},
					{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/zhinengben.png',
						tit: 'AI智能本',
						tab: 'zhinengben'
					},
					{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/aiwordchop.png',
						tit: 'AI单词斩',
						tab: 'aiwordchop'
					},
					{
						img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/aienglishReading.png',
						tit: 'AI英语分级阅读',
						tab: 'aienglishReading'
					}
				]
			}
		},
		onLoad() {
			this.getPhoneHeight()
			this.getParentQidControl()

		},
		onShow() {
			this.getSnOnline()
		},
		computed: {
			...mapGetters(['isBind', 'snInfo', 'isOnline'])
		},
		methods: {
			...mapActions(['getSnOnline']),
			getPhoneHeight() { //获取高度
				let that = this;
				uni.getSystemInfo({
					success: function(res) {
						that.phoneHeight = res.statusBarHeight
					},
				});
			},

			tabsChange(index) {
				this.controlId = index
			},
			gkTabChange(index) {
				var tab = this.gkList[index].tab
				var url = this.gkUrl + tab + "&gankaoUID=" + this.uid
				var item = {
					url: url
				}
				uni.navigateTo({
					url: '/pages_subpackage/studentGK/report/index?item=' + encodeURIComponent(JSON.stringify(
						item))
				})
			},
			async gotoUrl(tab) {
				if (this.uid == undefined || this.uid == -1 || this.uid == "") {
					this.$refs.uToast.show({
						title: '请先选择要查看的账号',
						icon: false,
						duration: 3000,
						type: 'warning'
					})
					return
				}
				if (tab !== '') {
					var url = this.gkUrl + tab + "&gankaoUID=" + this.uid
				} else {
					var url = 'https://colorful2.gankao.com/p-account/statistics/student?gankaoUID=' + this.uid
				}
				await loginGanKaoH5({
					uid: this.uid,
					redirectUrl: url
				}).then(res => {
					var item = {
						url: res.data.url
					}
					uni.navigateTo({
						url: '/pages_subpackage/studentGK/report/index?item=' + encodeURIComponent(JSON.stringify(item))
					})
				})
			},
			getParentQidControl() {
				getParentQid().then(res => {
					this.qidList = res.data
					if (this.qidList.length <= 1) {
						uni.navigateTo({
							url: "/pages_subpackage/bindQid/bindTuto"
						});
					} else {
						this.uid = this.qidList[0].uid
						uni.setStorageSync("uid", this.qidList[0].uid)
					}
				})
			},
			swiperChange(index) {
				this.currentInedex = index
				this.uid = this.qidList[index].uid
				uni.setStorageSync("uid", this.qidList[index].uid)
			},
			async clickSwiper(index, item) {
				if (item.uid == -1) {
					//跳转绑定页面
					uni.navigateTo({
						url: "/pages_subpackage/bindQid/bindTuto"
					});
				} else {
					//跳转设备信息
					uni.navigateTo({
						url: "/pages_subpackage/bindQid/qidInfo?item=" + encodeURIComponent(JSON.stringify(item)),
					});
				}
			}

		}
	}
</script>

<style>
	page {
		background-color: #f1f2f6;
	}
</style>

<style lang="less" scoped>
	.top_box {
		// background-positio0%;
		background-image: url('https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/beijing.png');
		background-repeat: no-repeat;
		background-size: 100%;
		color: #ffffff;
		padding-bottom: 60rpx;
	}

	.top {
		position: fixed;
		top: 0;

		.top_tit {
			position: absolute;
			bottom: 10px;
			font-size: 34rpx;
			font-weight: bold;
			margin-left: 40rpx;
		}
	}

	.header_info {
		.user_info {
			display: flex;
			flex-direction: column;
			justify-conent: space-between;
			flex: 1;

			.username {
				font-size: 32rpx;
			}
		}

		.other_info {
			// padding-left: 160rpx;
			font-size: 24rpx;
			// padding-top: 20rpx;
			color: #babcc1;
		}
	}

	.body {
		background-color: #ffffff;

		// padding: 30rpx;
		.class-room {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;

			.text {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

	}

	.snSwiper {
		border-radius: 36rpx;
		margin: 20rpx;
		position: relative;
		height: 350rpx;
		background-color: #ffffff;
	}

	.control_list {
		// margin: 40rpx;
		border-radius: 40rpx;
		overflow: hidden;
		box-shadow: 0px 0px 10px 3px #f2f2f2;
		padding-top: 20rpx;

		.app_use_record_header {
			display: flex;
			justify-content: flex-end;
			background-repeat: no-repeat;
			padding-bottom: 60rpx;
		}

		.app_use_record_footer {
			background-color: #fff;
			font-size: 24rpx;
			color: #b8b8b8;
			text-align: right;
			padding-right: 20rpx;
		}

		.control_item {
			position: relative;
			background-color: #fff;
			font-size: 26rpx;
		}

		.control_line {
			position: absolute;
			bottom: 20rpx;
			right: 40rpx;
			width: 80%;
			height: 1px;
			background-color: #f7f7f7;
		}
	}
</style>